<template>
    <div>
        <button @click="handleClick">
            <!-- 默认插槽 -->
            <slot></slot>
        </button>
        <!-- 底部具名插槽 -->
        <slot name="footer"></slot>
    </div>
</template>

<script>
/**
 * @event click
 * @description 点击事件
 * @arg {string} 名称
 *
 * @event update:title
 * @description 更新标题
 * @arg {string} 标题
 */
export default {
    name: 'demo',

    props: {
        /**
         * 支持块注释
         */
        value: {
            type: String | Number,
            required: true,
            default: '10px'
        },

        // 支持行注释
        title: {
            type: String,
            default: '智能助手'
        },

        /**
         * 类型
         * @option one 选项1
         * @option two 选项2
         * @option three 选项3
         * @option four 选项4
         */
        type: {
            type: String,
            default: 'one'
        },

        list: {
            type: Array,
            default: () => {
                return [
                    {
                        value: 1
                    },
                    {
                        value: 2
                    },
                    {
                        value: 3
                    }
                ];
            }
        }
    },

    methods: {
        /*
         * @public 标识外部可调用方法
         * @param {*} param1 参数1
         * @param {string|number} param2 参数2
         * @returns {*} 返回值
         */
        getWeeks() {},

        // @public 点击
        // @param {string} name 事件名
        // @returns {string} 返回值
        handleClick(name) {
            const title = '';
            const value = '';

            this.$emit('update:title', title);

            // 同时只有调用过 $emit 触发的事件才会被收集，即使在注释里定义了也没用
            this.$emit('click', name);

            // 提交
            // @arg 标题
            this.$emit('submit', title);

            /**
             * 测试事件
             * @param {string} value 值
             */
            this.$emit('test', value);
        }
    }
};
</script>
